<template>
  <div id="work">
    <div class="homeTitle">个人工作台</div>
    <div class="worktop">
      <div class="yjxx" @click="$router.push('earlywarning')">
        <div class="title">
          <p>今日指标预警消息</p>
          <p>{{sum}} 条</p>
        </div>
        <!-- 饼形图 -->
        <div class="bingtu">
          <div class="echars" v-if="sum !=0">
            <div class="circle" ref="myChart"></div>
          </div>
          <div v-else class="image">
            <img src="../../assets/image/yasuo.png">
          </div>
        </div>
      </div>
      <div class="yjtx" @click="$router.push('earlywarning')">
        <div class="title">
          <p>今日关注的指标预警提醒</p>
          <p>{{sum1}} 条</p>
        </div>
        <!-- 饼形图 -->
        <div class="bingtu">
          <!-- ---echars------- -->
          <div class="echars" v-if="sum1 != 0">
            <div class="circle" ref="myChart1"></div>
          </div>
          <div v-else class="image">
            <img src="../../assets/image/yasuo.png">
          </div>
        </div>
      </div>
      <div class="ycxx" @click="$router.push('abnormal')">
        <div class="title">
          <p>今日异常业务预警消息</p>
          <p>{{unusualWarn.total}}条</p>
        </div>
        <!-- 条形进度条 -->
        <div class="warnProgress" v-if="unusualWarn.total !=0">
          <div class="ablist">
            <div class="listName">疑似虚增负债</div>
            <div class="tiao">
              <el-progress :percentage="unusualWarn.疑似虚增负债rate" color="#C99746" :show-text="false"></el-progress>
              <div class="text">{{unusualWarn.疑似虚增负债}}</div>
            </div>
          </div>
          <div class="ablist">
            <div class="listName">疑似资产代持</div>
            <div class="tiao">
              <el-progress :percentage="unusualWarn.疑似资产代持rate" color="#C99746" :show-text="false"></el-progress>
              <div class="text">{{unusualWarn.疑似资产代持}}</div>
            </div>
          </div>
          <div class="ablist">
            <div class="listName">疑似资产出表</div>
            <div class="tiao">
              <el-progress :percentage="unusualWarn.疑似资产出表rate" color="#C99746" :show-text="false"></el-progress>
              <div class="text">{{unusualWarn.疑似资产出表}}</div>
            </div>
          </div>
          <div class="ablist">
            <div class="listName">疑似违规投资</div>
            <div class="tiao">
              <el-progress :percentage="unusualWarn.疑似违规投资rate" color="#C99746" :show-text="false"></el-progress>
              <div class="text">{{unusualWarn.疑似违规投资}}</div>
            </div>
          </div>
        </div>
        <div v-else class="image">
          <img src="../../assets/image/yasuo.png">
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <!-- 表格名称 -->
      <div class="sTitle">
        <span style="color: white">待办事项</span>
        <el-input placeholder="搜索行社机构" v-model="search" class="input-with-select">
          <el-button slot="append" @click="searchHang" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <!-- 表格 -->
      <div class="tablecon">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="createTime" label="单据发起日期"  align="center"></el-table-column>
          <el-table-column prop="applyNum" label="单据编号"  align="center"></el-table-column>
          <el-table-column prop="model" label="待办类型" align="center"></el-table-column>
          <el-table-column prop="bank" label="行社\机构" align="center"></el-table-column>
          <el-table-column prop="flowState" label="待办事项" :formatter="selectState" align="center"></el-table-column>
          <el-table-column prop="address" label="操作" align="center" width="172">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleClick(scope.row)">办理</el-button>
              <el-button size="mini" type="text" v-if="scope.row.flowState == '3'" @click="cancleApply(scope.row)">撤销</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pgfy">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="totalPage">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "work",
  data() {
    return {
      search: '',
      tableData: [],
      // 分页
      currentPage: 1,
      totalPage:0,
      unusualWarn: '',
      zhibiao: '',
      sum: '',
      guanzhuzhibiao: '',
      sum1: ''
    };
  },
  mounted() {
    this.getHandleList();
    this.getyichangData(); //异常预警
    this.getcountWarnRecord(); //指标预警
    this.getTtentionWarn(); //关注指标
  },
  methods: {
    // 今日指标预警信息统计
      getcountWarnRecord () {
        this.axios.get('warnRecord/countWarnRecord')
          .then(({data})=> {
            this.sum = data.data.sum;
            let zhibiao =[
             { value: data.data.exceed, name: "指标超标",itemStyle: {color: '#F06F60'}},
             { value: data.data.alarm, name: "指标报警", itemStyle: {color: '#FF9966'}},
             { value: data.data.remind, name: "指标预警", itemStyle: {color: '#F9AFA6'}}]
            let filter = zhibiao.filter((item, index)=> {
              return item.value != 0;
            })        
            this.zhibiao = filter;
            if (data.data.sum !=0) {
              setTimeout(()=>{this.drawLine()}, 10);
            }
          })

      },
      // 今日关注指标预警信息
      getTtentionWarn () {
        this.axios.get('warnRecord/attentionWarn')
          .then(({data})=> {
            this.sum1 = data.data.sum;
            let guanzhuzhibiao = [
              { value: data.data.common, name: "普通级别", itemStyle: {color: '#9999CC'}},
              { value: data.data.medium, name: "中等级别", itemStyle: {color: '#990099'}},
              { value: data.data.severity, name: "严重级别", itemStyle: {color: '#500050'}},
            ]
            let filter = guanzhuzhibiao.filter((item, index)=> {
               return item.value != 0;
            })
          this.guanzhuzhibiao = filter;
          if (data.data.sum !=0) {
            setTimeout(()=>{this.drawLine1()}, 10);
          }
        })
      },
    // -------------------上面的echars开始-------------------
      getyichangData() {
        this.axios.get('unusualWarn/dailyStatus')
          .then(({data})=> {
            this.unusualWarn = data.data;
          })
      },
    // -------------------上面的echars结束-------------------
    // 待办事项
    selectState(val) {
      if(val.flowState == '1' || val.flowState == 1) {
        return '进行中'
      }else {
        return '驳回待修改'
      }
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart);
      // 绘制图表
      myChart.setOption({
        calculable: true,
        tooltip : {
          trigger: 'item',
          // formatter: (data)=> {return data.data.name+'：'+data.data.value+'%'}
        },
        series: [
          {
            name: "指标预警",
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            data: this.zhibiao
          }
        ]
      });
    },
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart1);
      // 绘制图表
      myChart.setOption({
        calculable: true,
         tooltip : {
          trigger: 'item',
          // formatter: (data)=> {return data.data.name+'：'+data.data.value+'%'}
        },
        series: [
          {
            name: "关注的指标预警",
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            data: this.guanzhuzhibiao
          }
        ]
      });
    },
     // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getHandleList()
    },
    //待办列表
    getHandleList() {
      let param = {
        fullName:this.search,
        page: this.currentPage
      }
         this.axios.get('bondApplyFlow/selectList', {params: param}).then((res) => {
            this.tableData = res.data.data
            this.totalPage = res.data.pageInfo.total
          })
    },
    searchHang() {
      this.currentPage = 1
      this.getHandleList()
    },

    cancleApply(row) {
      // 除省联社驳回的其他驳回
      let param = {
        id: row.fId
      }
        this.axios.post('bondApplyFlow/revocation', param).then(res => {

          this.$message({
            type: 'success',
            message: '撤销成功'
          })
          this.getHandleList()
        }).catch(err => {
          this.$message({
            type: 'error',
            message: '服务器出现错误'
          })
        })
    },
    handleClick(row){
      switch(row.model) {
        case '理财产品交易': 
              if(row.flowState == '3'){
                
                this.$router.push({path: 'licaiApplyEdit', query:{applyId: row.applyId, flowId: row.flowId,
                flowState: row.flowState,
                currentRole: row.currentRole}})
              } else {
                  this.$router.push({path: 'licaiapplyDo', query:{applyId: row.applyId, flowId: row.flowId,
                    flowState: row.flowState,
                    currentRole: row.currentRole}})
             }
              break;
        case '债券交易': 
               if(row.flowState == '3'){
        
                this.$router.push({path: 'editBondDetail', query:{applyId: row.applyId, flowId: row.flowId,
                flowState: row.flowState,
                currentRole: row.currentRole}})
              } else {
                  this.$router.push({path: 'viewBondDetail', query:{applyId: row.applyId, flowId: row.flowId,
                    flowState: row.flowState,
                    currentRole: row.currentRole}})
             }
             break;
        case '同业拆借交易': 
               if(row.flowState == '3'){
        
                this.$router.push({path: 'editInterDetail', query:{applyId: row.applyId, flowId: row.flowId,
                flowState: row.flowState,
                currentRole: row.currentRole}})
              } else {
                  this.$router.push({path: 'viewInterDetail', query:{applyId: row.applyId, flowId: row.flowId,
                    flowState: row.flowState,
                    currentRole: row.currentRole}})
             }
             break;
        case '存放同业交易': 
               if(row.flowState == '3'){
        
                this.$router.push({path: 'editNostro', query:{applyId: row.applyId, flowId: row.flowId,
                flowState: row.flowState,
                currentRole: row.currentRole}})
              } else {
                  this.$router.push({path: 'viewNostro', query:{applyId: row.applyId, flowId: row.flowId,
                    flowState: row.flowState,
                    currentRole: row.currentRole}})
             }
             break;
        case '债券回购交易': 
               if(row.flowState == '3'){
                this.$router.push({path: 'editZqhgApply', query:{flowId: row.flowId, applyId: row.applyId,
                flowState: row.flowState,
                currentRole: row.currentRole}})
              } else {
                  this.$router.push({path: 'viewZqhgDetail', query:{applyId: row.applyId, flowId: row.flowId,
                    flowState: row.flowState,
                    currentRole: row.currentRole}})
             }
             break;
        case '债券借贷交易': 
               if(row.flowState == '3'){
                this.$router.push({path: 'editZqjdApply', query:{flowId: row.flowId, applyId: row.applyId,
                flowState: row.flowState,
                currentRole: row.currentRole}})
              } else {
                  this.$router.push({path: 'viewZqjdDetail', query:{applyId: row.applyId, flowId: row.flowId,
                    flowState: row.flowState,
                    currentRole: row.currentRole}})
             }
             break;
        case '同业存单交易': 
               if(row.flowState == '3'){
                this.$router.push({path: 'editNcdApply', query:{flowId: row.flowId, applyId: row.applyId,
                flowState: row.flowState,
                currentRole: row.currentRole}})
              } else {
                  this.$router.push({path: 'viewNcdDetail', query:{applyId: row.applyId, flowId: row.flowId,
                    flowState: row.flowState,
                    currentRole: row.currentRole}})
             }
             break;
        default: break;
      }
     
     
    }
  }
};
</script>

<style lang="scss">
#work {
  .worktop {
    background-color: white;
    display: flex;
    > div {
      width: auto;
    }
    .title {
      margin-top: 10px;
      padding: 10px;
      border: 1px solid black;
      display: inline-block;
      > p {
        &:first-child {
          text-align: center;
        }
        &:last-child {
          text-align: center;
          color: #f47162;
        }
      }
    }
    // 一
    .yjxx {
      display: inline-block;
      // min-width: 350px;
      width: 33.333%;
      text-align: center;
      .bingtu {
        width: 100%;
        height: 350px;
        margin: 0 auto;
        .circle {
          width: 100%;
          height: 350px;
        }
        .image {
          height: 350px;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          img {
            // width: 60%;
            width: 320px;
          }
        }
      }
    }
    // 二
    .yjtx {
      width: 33.333%;
      display: inline-block;
      // min-width: 350px;
      text-align: center;
      .bingtu {
        width: 100%;
        height: 350px;
        margin: 0 auto;
        .circle {
          width: 100%;
          height: 350px;
        }
        .image {
          height: 350px;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          img {
            width: 320px;
          }
        }
      }
    }
    // 三
    .ycxx {
      width: 33.333%;
      display: inline-block;
      min-width: 350px;
      text-align: center;
      .warnProgress {
        margin-top: 100px;
        .ablist {
          display: flex;
          justify-content: flex-start;
          height: 30px;
          align-items: center;
          .listName {
            min-width: 150px;
            color: #6ab6fb;
            >span {
              color: #ff9900;
            }
          }
          .tiao {
            display: flex;
            width: 100%;
            align-items: center;
            .el-progress {
              width: 80%;
            }
            .text {
              padding-left: 20px;
              color: #ff9900;
            }
          }
        }
      }
      .image {
        height: 350px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        img {
          width: 320px;
        }
      }
    }
  }
  // ------表格------
  .table {
    background: white;
    .sTitle {
      margin-top: 40px;
      height: 50px;
      line-height: 50px;
      padding-left: 20px;
      border-bottom: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-input {
        width: 400px;
        margin-right: 20px;
      }
    }
    .tablecon {
      padding: 20px;
    }
    .pgfy {
      padding: 20px;
      padding-top: 10px;
      text-align: right;
    }
  }
}
</style>
